<template name="sally-tree-item">
	<view class="node-ul-parent">
		<view v-for="(item, index) in treeList" :key="index" :class="'sally-tree-level-'+level" class="sally-tree-li">
			<view class="node-border"></view>
			<view class="sally-tree-node__content" :class="{ 'none-childern': !(item.levels && item.levels.length) }">
				<image @click.stop="onShowChild(item)" :class="{ expanded: item.showChild }"
					class="sally-tree-node__expand-icon" v-if="item.levels && item.levels.length"
					:src="item.showChild?jianhaoPng:config.defaultIcon">
				</image>

				<view class="sally-tree-node__label" @click.stop="onClickLeve(index,item)"
					:class="{ 'bold-label': isTopLevelParent(item), 'small-font': isLastLevel(item)}">
					<text>{{ item.label }}</text>
				</view>
			</view>
			<view v-if="item.levels && item.levels.length && item.isLoaded" v-show="item.showChild"
				class="sally-tree-node__levels">
				<sally-tree-item :updateGrandpaData="updateGrandpaData" :config="config" name="sally-tree-item" @onChange="onChildCheckbox" :level="level+1"
					:parentIds="[item.id,...parentIds]" :parents="[item,...parents]" :list="item.levels">
					<template v-slot:right="{scope}">
						<slot name="right" :scope="scope"></slot>
					</template>
				</sally-tree-item>
			</view>
		</view>
	</view>
</template>

<script>
	// import jianhao from '/static/images/tiqianpi/jianhao.png'
	// 递归自己组件
	import sallyCheckbox from "./sally-checkbox.vue"
	import sallyTreeItem from "../sally-tree/sally-tree-item.vue"
	export default {
		name: "sally-tree-item",
		components: {
			sallyTreeItem,
			sallyCheckbox
		},
		props: {
			updateGrandpaData:{
				type:Function,
				 required: true 
			},
			config: {
				type: Object,
				default: () => {}
			},

			// 层级
			level: {
				type: Number,
				default: 0,
			},
			parents: {
				type: Array,
				default: () => []
			},
			parentIds: {
				type: Array,
				default: () => []
			},
			list: {
				type: Array,
				default: () => []
			},

		},
		data() {
			return {
				jianhaoPng: 'https://mcdn.chatgk.com/xcx/static/images/tiqianpi/jiahao.png',
				treeList: [],
				selectIndex: -1,
				rowIndex: null,
			}
		},
		watch: {
			list: {
				handler(newVal) {
					this.treeList = newVal
					const selectIndex = uni.getStorageSync('highlightedIndex');
					if (selectIndex != null) {
						// 根据索引设置高亮状态
						this.treeList[selectIndex].highlight = true;
					}
				},
				deep: true, // 是否深度监听
			}
		},
		computed: {
			treeList() {
				return this.list;
			}
		},

		mounted() {},
		methods: {

			isTopLevelParent(node) {
				return !node.parentIds || node.parentIds.length === 0; // 判断是否为最顶层的父级节点
			},
			isLastLevel(node) {
				//判断是否为最下级节点
				return node.levels.length === 0
			},
			onClickLeve(index, level) {
				console.log("点击了最里层111");
				this.updateGrandpaData()
				this.rowIndex = level.rowIndex
				this.clearHighlight(this.treeList);
				// 设置当前节点的高亮状态
				// this.treeList[index].highlight = true;
				level.highlight = true;
				uni.setStorageSync('highlightedIndex', index);
				uni.$emit('leveUpdate', level.rowIndex);
			
				// uni.navigateBack({
				// 	delta: 1
				// })
				
			},

			clearHighlight(nodes) {
				nodes.forEach(node => {
					node.highlight = false;
					if (node.levels && node.levels.length) {
						this.clearHighlight(node.levels);
					}
				});
			},

			// 子组件改变；
			onChildCheckbox(item, parents) {
				console.log("点击了这个00");
				this.$emit('onChange', item, parents, this.parentIds);

			},
			onShowChild(item) {
				item.showChild = !item.showChild;
				item.isLoaded = true;
			}
		},
	}
</script>

<style scoped lang="less">
	// 指示线
	.sally-tree-node__levels .sally-tree-li,
	.node-ul-parent .sally-tree-li {
		list-style: none;
		position: relative;
	}

	.sally-tree-node__levels .sally-tree-li:before {
		position: absolute;
		content: '';
		top: 35rpx;
		left: -5rpx;
		width: 20rpx;
		height: 1rpx;
		border-bottom: 1rpx dashed #ccc;

	}

	.sally-tree-node__levels .sally-tree-li:not(:last-child)::after {
		position: absolute;
		content: '';
		top: -18rpx;
		left: -5rpx;
		bottom: -50rpx;
		border-left: 1rpx dashed #ccc;
	}

	.sally-tree-node__levels .sally-tree-li:first-child .node-border {
		position: relative;
	}

	.sally-tree-node__levels .sally-tree-li:first-child .node-border::after {
		position: absolute;
		content: '';
		height: 50rpx;
		top: -18rpx;
		left: -5rpx;
		bottom: 0rpx;
		border-left: 1rpx dashed #ccc;
	}

	.leve-main-sel {
		color: #FF3B0A;
	}

	.highlighted {
		color: #ff3b0a;
	}

	.bold-label {
		font-weight: bold;
	}

	.small-font {
		font-size: 24rpx;
	}

	@import "./style.less";
</style>